<template>
  <div>
    <el-form ref="dispatchLogsRef" :inline="true" :model="dispatchlogsF.dispatchLogsS">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="dispatchlogsF.dispatchLogsS.name" placeholder="名称" type="text"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <PickDate v-model:dateTime="dispatchlogsF.dispatchLogsS"></PickDate>
      </el-form-item>
      <el-form-item label="状态" prop="type">
        <el-select v-model="dispatchlogsF.dispatchLogsS.runStatus" placeholder="状态">
          <el-option v-for="item in dispatchlogsF.runStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-button type="primary" @click="resetS(dispatchLogsRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="dispatchlogsF.dispatchLogsTable" style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80">
        <template #default="scope">
          {{ (dispatchlogsF.dispatchLogsS.page - 1) * dispatchlogsF.dispatchLogsS.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="名称" prop="name" />
      <el-table-column align="center" header-align="center" label="调度code" prop="dispatchCode" />
      <el-table-column align="center" header-align="center" label="运行时间" prop="runTime" />
      <el-table-column align="center" header-align="center" label="运行状态" prop="runStatus.desc" />
      <el-table-column align="center" header-align="center" label="日志" :show-overflow-tooltip="true" prop="logs" />
      <el-table-column align="center" fixed="right" header-align="center" label="操作">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="detail(scope.row.id)">查看 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="dispatchlogsF.dialogFormVisible" title="定时任务详情" destroy-on-close>
      <el-descriptions class="margin-top" :column="1" :size="size" border>
        <el-descriptions-item :column="1" label="名称">
          {{ dispatchlogsF.dispatchLogsDetail.name }}
        </el-descriptions-item>
        <el-descriptions-item :column="1" label="编码">
          {{ dispatchlogsF.dispatchLogsDetail.dispatchCode }}
        </el-descriptions-item>
        <el-descriptions-item :column="1" label="运行时间">
          {{ dispatchlogsF.dispatchLogsDetail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item :column="1" label="运行状态">
          {{ dispatchlogsF.dispatchLogsDetail.runStatus.desc }}
        </el-descriptions-item>
        <el-descriptions-item :column="1" label="日志">
          {{ dispatchlogsF.dispatchLogsDetail.logs }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
  <Page :pageData="dispatchlogsF.dispatchLogsS" @selectPage="search"></Page>
</template>
<script lang="ts" setup>
import Page from '@/components/Page.vue'
import { dispatchLogsClass, dispatchLogsTableA } from '@/page/types/dispatch/dispatchLogs'
import PickDate from '@/components/PickDate.vue'
import { dispatchLogsPage, dispatchLogsDetail, dispatchLogsDelete } from '@/api/dispatch'
import { FormInstance } from 'element-plus/es'
const dispatchlogsF = reactive(new dispatchLogsClass())
const dispatchLogsRef = ref()
const search = () => {
  dispatchLogsPage(dispatchlogsF.dispatchLogsS).then(res => {
    dispatchlogsF.dispatchLogsTable = res.data.records as dispatchLogsTableA[]
    dispatchlogsF.dispatchLogsS.page = res.data.current
    dispatchlogsF.dispatchLogsS.size = res.data.size
    dispatchlogsF.dispatchLogsS.total = res.data.total
  })
}
const resetS = (form: FormInstance | undefined) => {
  if (!form) return
  form.resetFields()
}
const detail = (id: string) => {
  dispatchLogsDetail(id).then(res => {
    dispatchlogsF.dialogFormVisible = true
    dispatchlogsF.dispatchLogsDetail = res.data as dispatchLogsTableA
  })
}
onMounted(() => {
  search()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
